<template>
    <div>
        <Toolbar>
            <n-button @click="add" type="primary">新增</n-button>
            <n-button @click="clear" type="error">清空</n-button>
        </Toolbar>

        <n-data-table :columns="columns" :data="data" :pagination="pagination" :bordered="false" />

        <n-modal v-model:show="showModal" :mask-closable="false" preset="card" :title="modalTitle" max-w-600>
            <div>
                <n-form ref="formRef" :model="currentPermission" :rules="rules">
                    <n-form-item label="唯一标识" path="code">
                        <n-input v-model:value="currentPermission.code" clearable />
                    </n-form-item>

                    <n-form-item label="权限名称" path="name">
                        <n-input v-model:value="currentPermission.name" clearable />
                    </n-form-item>

                    <n-form-item label="权限描述" path="description">
                        <n-input v-model:value="currentPermission.description" clearable />
                    </n-form-item>
                </n-form>
            </div>

            <template #footer>
                <div text-right>
                    <n-button type="primary" @click="save">保存</n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>

<script setup>
import { NButton, NSpace } from "naive-ui";
import _ from 'lodash-es';
import {
    getPermissions, addPermission, delPermission,
    updatePermission, clearPermission
} from '@/apis/permission';

const showModal = ref(false);
const modalTitle = ref("新增权限");
const currentPermission = ref({ code: "", name: "", description: "" });
const formRef = ref();

const rules = {
    code: {
        required: true,
        trigger: ["blur", "input"],
        message: "请输入 唯一标识",
    },
    name: {
        required: true,
        trigger: ["blur", "input"],
        message: "请输入 权限名称",
    },
    description: {
        required: true,
        trigger: ["blur", "input"],
        message: "请输入 权限描述",
    }
};

const createColumns = () => {
    return [
        {
            title: "唯一标识",
            key: "code"
        },
        {
            title: "名称",
            key: "name"
        },
        {
            title: "描述",
            key: "description"
        },
        {
            title: "操作",
            key: "actions",
            render(row) {
                return h(NSpace, {}, () => [h(
                    NButton,
                    {
                        strong: true,
                        type: "primary",
                        size: "small",
                        onClick: () => update(row)
                    },
                    { default: () => "修改" }
                ), h(
                    NButton,
                    {
                        strong: true,
                        type: "error",
                        size: "small",
                        onClick: () => del(row)
                    },
                    { default: () => "删除" }
                )]);
            }
        }
    ];
};

const data = ref([]);

const columns = createColumns();
const pagination = false;

function update(row) {
    modalTitle.value = "修改权限";
    currentPermission.value = row;
    showModal.value = true;
}

function cancel() {
    showModal.value = false;
}

async function loadData() {
    const result = await getPermissions();

    if (result.code === 0)
        data.value = result.content;
}

async function add() {
    showModal.value = true;
    modalTitle.value = "新增权限";
}

async function save() {
    try {
        await formRef.value?.validate();

        const current = currentPermission.value;

        if (current.id) {
            // 更新
            await updatePermission(current);
        } else {
            // 新建
            await addPermission(current);

            // 更新一下前端数据表格
            data.value.push(current);
        }

        cancel();
        currentPermission.value = {};

        $message.success("保存成功！");
    } catch (error) {
    }
}

async function del(row) {
    console.log(row);

    $dialog.confirm({
        title: "提示",
        type: "info",
        content: "确认删除吗？",
        async confirm() {
            const result = await delPermission(row.id);

            if (result.code === 0) {
                _.pull(data.value, row);
                $message.success("已成功删除");
            }
        },
    });
}

async function clear() {
    $dialog.confirm({
        title: "提示",
        type: "info",
        content: "确认清空吗？该操作不可逆，将清空数据库中对应的权限表！",
        async confirm() {
            const result = await clearPermission();

            if (result.code === 0) {
                data.value.length = 0;
                $message.success("已成功删除");
            }
        },
    });
}

loadData();
</script>